<html>
<head>
     <meta charset="UTF-8">
     <title>MISP</title>
     <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
     <link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
     <script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
     <script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
     <script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
     <script type="text/javascript">
     $(function () {
        /*树形菜单点击管理*/
        $("#tree").tree({
            url : 'treeData.json',
            lines : true ,
			onClick : function (node) {
				if (node.attributes) {
					openTab(node.text, node.attributes.url);
				}
			}
        });
		/*在右边center区域打开菜单，新增tab*/
		function openTab(title, url) {
			//判断是否已经存在
			if ($("#tabs").tabs('exists', title)) {  
				$('#tabs').tabs('select', title);
			} else {
				//新增tab
				$('#tabs').tabs('add', {
				title : title,
				closable : true,
				content : createTabContent(url)
				});
			}
		}
		/* 生成tab内容 */
		function createTabContent(url){
			return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
		}
		
		/*绑定tabs的右键菜单*/
        $("#tabs").tabs({
            onContextMenu : function (e, title) {
                e.preventDefault();
                $('#tabsMenu').menu('show', {
                    left : e.pageX,
                    top : e.pageY
                }).data("tabTitle", title);
            }
        });
		/*实例化menu的onClick事件*/
        $("#tabsMenu").menu({
                onClick : function (item) {
                CloseTab(this, item.name);
            }
        });
		/*右键菜单关闭事件的处理*/
        function CloseTab(curTab, itemName) {
            //选中的tab的title
            var curTabTitle = $(curTab).data("tabTitle");
            //所有tab
            var allTabs = $("#tabs").tabs("tabs");
            //所有tab的title的数组
            var allTabsTitle = [];
            //关闭菜单
            if (itemName === "close") {
                $("#tabs").tabs("close", curTabTitle);
                return;
            }       
            //遍历所有tab
            $.each(allTabs, function () {
                var optTab = $(this).panel("options");
                //关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother
                if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
                    //往tab的title数组中添加title
                    allTabsTitle.push(optTab.title);
                //关闭所有
                } else if (optTab.closable && itemName === "closeall") {
                    allTabsTitle.push(optTab.title);
                }
            }); 
            //for循环逐个关闭
            for (var i = 0; i < allTabsTitle.length; i++) {
                $("#tabs").tabs("close", allTabsTitle[i]);
            }
        }
});
</script>
</head>
<body class="easyui-layout">
	<div id="head" data-options="region:'north'" style="height:60px;">
        <div style="height:30px;font-size:30px">MISP</div>
    </div>
    <div id="foot" data-options="region:'south'" style="height:30px;text-align: center;background: #D2E0F2">CopyRight:SCAU</div>
    <div id="nav" data-options="region:'west',split:true" style="width:200px" title="导航">
		<div id="navMenu" class="easyui-accordion" data-options="fit:true,border:false">
			<div title="系统管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
            </div>
			<div title="基础数据" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
				<ul id="tree" class="easyui-tree" data-options="lines:true"></ul>
			</div>
        </div>
    </div>
    <div id="mainPanle" data-options="region:'center'">
		<div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" >
            <div title="About" data-options="iconCls:'icon-tip'">
                <iframe src="about.html" style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe>
            </div>
        </div>    
    </div>
	
	<div id="tabsMenu" class="easyui-menu" style="width:150px;">
        <div data-options="name:'close'">关闭</div>
        <div class="menu-sep"></div>
        <div data-options="name:'closeall'">全部关闭</div>
        <div data-options="name:'closeother'">除此之外全部关闭</div>
    </div>
	
</body>
</html>